<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>忘记密码</title>
    <script src="./Resources/js/main.js"></script>
    <link rel="stylesheet" href="./Resources/css/auth.min.css">
</head>
<body>
    <div class="app">
        <div class="formMax rowStartCenter">
            <div class="rowCenterCenter" style="padding-top: 3.5vh;">
                <img src="./Resources/imgs/lg.png" alt="暂无图片">
            </div>
            <div class="form">
                <div class="h2">重置密码</div>
                <form>
                    <div class="inputBox">
                        <div class="input">
                            <input type="text" placeholder="请输入账号" name="userAccount">
                        </div>
                    </div>
                    <div class="inputBox">
                        <div class="input">
                            <input type="text" placeholder="请输入用户名" name="userName">
                        </div>
                    </div>
                    <div class="inputBox">
                        <div class="input">
                            <input type="text" placeholder="请输入手机号" name="userPhone">
                        </div>
                    </div>
                    <div class="rowEndCenter form-bottom">
                        <button type="submit">确定</button>
                    </div>
                </form>
                <div class="form-below rowCenterCenter">
                    <a href="./login.html" style="margin-left: 0;">返回登录</a>
                </div>
            </div>
        </div>
    </div>
    <script>
        window.addEventListener("DOMContentLoaded", () => {
            initialize(".app",{
                showLoading: true,
                message: "数据加载中..."
            }).then(() => {
                load();
            }).catch(error => {
                alert(error);
            })
        });

        function load(){
            document.querySelector("form").addEventListener("submit",(e) => {
                e.preventDefault();
                if (document.activeElement) {
                    document.activeElement.blur();
                };
                login();
            });
        };

        function login(){
            const form = document.querySelector("form");
            const formData = {
                account: form.querySelector('input[name="userAccount"]').value,
                name: form.querySelector('input[name="userName"]').value,
                phone: form.querySelector('input[name="userPhone"]').value
            };
            const formDataTips = {
                account: "账号不能为空！",
                name: "用户名不能为空！",
                phone: "手机号不能为空！"
            };
            for(let key in formData) {
                if(!formData[key] || formData[key] === "") {
                    alert(formDataTips[key], null, "warning");
                    return;
                }
            };
            const dialog = $.loading("密码重置中，请稍后", "rgba(0,0,0,0.6)", "#ffffff");
            dialog.show();
            ajax("POST", `${$.baseUrl}/api/user/reset/password`, formData).then(data => {
                dialog.hide();
                if(data.success) {
                    alert(`${data.message}：${data.data.USER_PASSWORD}`, () => {
                        window.location = "./login.html";
                    }, "success");
                } else {
                    notification({
                        message:data.message,
                        type:'error'
                    });
                }
            }).catch(error => {
                dialog.hide();
                notification({
                    message:error.message,
                    type:'error'
                });
            })
        };
    </script>
</body>
</html>